<template>
    <div>
        <el-row>
            <el-col :span="18">
                <div id="stackchart" style="width:100%;height:900px;margin-top:20px"></div>
            </el-col>
            <el-col :span="6">
                <div class="tjInfo">
                    <h2 style="padding:12px">数据统计</h2>
                    <div style="padding:5px">
                        <table  class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                             <tr>
                                <td>地区</td>
                                <td>一般事件</td>
                                <td>重大事件</td>
                                <td>小计</td>
                            </tr>
                            <tr v-for="(v,index) in area" :key="v" :class="index%2==0?'mycolor':''">
                                <td>{{v}}</td>
                                <td>{{common[index]}}</td>
                                <td>{{great[index]}}</td>
                                <td>{{common[index]+great[index]}}</td>
                            </tr>
                            <tr class="mycolor">
                                <td>合计</td>
                                <td>
                                    {{getSum(common)}}
                                </td>
                                <td>
                                    {{getSum(great)}}
                                </td>
                                <td>
                                    {{getSum(common)+getSum(great)}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as api from "@/api/skynetManage";

export default {
  data() {
    return {
      stackChart: null,
      area: [],
      areaData: [40, 52, 200, 134, 290, 230, 120, 90, 190, 200],
      common:[],
      great:[]
    };
  },
  methods: {
    initCharts(area,common,great) {
      this.stackChart = echarts.init(document.getElementById("stackchart"));
      this.stackChart.setOption({
        title: {
          text: new Date().getMonth() + 1 + "月份各村天网巡防事件发生次数柱状图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data:area
        },
        series: [
          {
            name: "一般事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: common
          },
          {
            name: "重大事件",
            type: "bar",
            stack: "数量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: great
          }
        ]
      });
    },
    getSum(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    }
  },
  mounted() {
    api.getSPEventCount().then(res=>{
      for(let i=0;i<res.data.length;i++){
        this.area.push(res.data[i].netGridName)
        this.common.push(res.data[i].common)
        this.great.push(res.data[i].great)
      }
       this.initCharts(this.area,this.common,this.great);
    })
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  padding: 10px;
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}
</style>
